<template>
  <div ref="Chart" style="height: 100%"/>
</template>
<script>
import { Chart } from '@antv/g2';
export default {
  props: {
    fontData: {
      type: Object,
      default: () => {}
    },
    //  fontData: {
    //     fontY: '85%',内容Y轴偏移量
    //     content: '26m',内容
    //     fill: '#E1E3E6',字体颜色
    //     fontSize: 16,字体大小
    //   },
    scaleColor: {
      typeof: String,
      default: () => ''
    }
    // scaleColor:'#00E0F1',已拥有的刻度颜色
  },
  data() {
    return {
      Chart: null
    };
  },
  mounted() {
    this.inChart();
  },
  methods: {
    inChart() {
      const ref = this.$refs.Chart;
      this.Chart = new Chart({
        container: ref,
        width: ref.clientWidth,
        height: ref.clientHeight
      });
      const data1 = [];
      for (let i = 0; i < 50; i++) {
        data1.push({
          type: i + '',
          value: 10
        });
      }

      const data2 = [];
      for (let i = 0; i < 50; i++) {
        const item = {};
        item.type = i + '';
        item.value = 10;
        if (i === 25) {
          item.value = 14;
        }
        if (i > 25) {
          item.value = 0;
        }
        data2.push(item);
      }

      this.Chart.scale({
        type: {
          range: [0, 1]
        },
        value: {
          sync: true
        }
      });
      this.Chart.legend(false);
      this.Chart.tooltip(false);

      const view1 = this.Chart.createView();
      view1.data(data1);
      view1.axis(false);
      view1.coordinate('polar', {
        startAngle: (-9 / 8) * Math.PI,
        endAngle: (1 / 8) * Math.PI,
        innerRadius: 0.75,
        radius: 1
      });
      view1.interval().position('type*value').color('#E1E3E6').size(1);

      const view2 = this.Chart.createView();
      view2.data(data1);
      view2.axis('value', false);
      view2.axis('type', {
        grid: null,
        line: null,
        tickLine: null,
        label: {
          offset: -7,
          style: {
            textAlign: 'center',
            fill: '#E1E3E6',
            fontSize: 6
          },
          formatter: (val) => {
            if (+val % 7 !== 0) {
              return '';
            }

            return val;
          }
        }
      });
      view2.coordinate('polar', {
        startAngle: (-9 / 8) * Math.PI,
        endAngle: (1 / 8) * Math.PI,
        innerRadius: 0.95,
        radius: 0.7
      });
      view2.interval().position('type*value').color('#E1E3E6').size(1);

      const view3 = this.Chart.createView();
      view3.data(data2);
      view3.axis(false);
      view3.coordinate('polar', {
        startAngle: (-9 / 8) * Math.PI,
        endAngle: (1 / 8) * Math.PI,
        innerRadius: 0.75,
        radius: 1
      });
      view3.interval().position('type*value').color('value', this.scaleColor).size(1);

      view3.annotation().text({
        position: ['50%', this.fontData.fontY],
        content: this.fontData.content,
        style: {
          fill: this.fontData.fill,
          fontSize: this.fontData.fontSize,
          textAlign: 'center',
          textBaseline: 'middle'
        }
      });

      this.Chart.render();
    }
  }
};
</script>
